*{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */
    background: linear-gradient(200deg,#2f80ed,#56ccf2);
}
.ball-box{
    width: 150px;
    height: 150px;
    /* 执行动画：动画名 时长 减速 先反向再正向 无限次播放 */
    animation: bounce 0.6s ease-out alternate-reverse infinite;
}
.ball{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #f7972b;
    box-shadow: 0 0 2px 4px #fff;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 绝对定位 */
    position: absolute;
    z-index: 1;
    /* 执行动画：动画名 时长 线性 无限次播放 */
    animation: roll 3s linear infinite;
}
.ball::before,.ball::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid #fff;
    /* 加一点点模糊 */
    filter: blur(0.5px);
}
.ball::before{
    left: -70%;
}
.ball::after{
    right: -70%;
}
.ball .a,.ball .b{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
}
.ball .a{
    width: 200px;
    height: 5px;
}
.ball .b{
    width: 5px;
    height: 200px;
}
.shadow{
    width: 150px;
    height: 5px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.4);
    position: absolute;
    bottom: 25vh;
    z-index: -1;
    filter: blur(1.5px);
    animation: shadow 0.6s ease-out alternate-reverse infinite;
}

/* 定义动画 */
/* 篮球弹跳的动画 */
@keyframes bounce {
    0%{
        transform: translateY(15vh);
    }
    100%{
        transform: translateY(-20vh);
    }
}
/* 篮球旋转的动画 */
@keyframes roll {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
/* 阴影的动画 */
@keyframes shadow {
    0%{
        transform: scale(0.15,1.25);
    }
    100%{
        transform: scale(1.25,0.75);
    }
}